<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="/admin/_layouts/default">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div layout:fragment="content">

    <script>
        layui.config({debug: true});
        layui.use(['layim'], function () {
            var $ = layui.jquery,
                layim = layui.layim;

            //
            var socket = new SockJS('/socket');
            stompClient = Stomp.over(socket);
            var token = $("meta[name='_csrf']").attr('content');
            var header = $("meta[name='_csrf_header']").attr('content');
            var headers = {};
            headers[header] = token;
            stompClient.connect(headers, function (frame) {
                // 接收私人信息
                stompClient.subscribe('/user/queue/messages', function (rs) {
                    var body = JSON.parse(rs.body);
                    if (body.type === 1) {
                        layim.getMessage(body.data);
                        stompClient.send("/app/messages/reply", {}, JSON.stringify({
                            type: 1,
                            data: {
                                type: 1,
                                id: [body.data.id]
                            }
                        }));
                    }
                });
                stompClient.subscribe('/topic/update/announcement', function (rs) {
                    var body = JSON.parse(rs.body);
                    console.log('公告更新', body.data.content);
                });
            });

            layim.config({
                title: '聊天',
                init: {
                    url: '/api/v1/im/init',
                    type: 'POST'
                },
                members: {
                    url: '',
                    data: {}
                },
                brief: false,
                min: false,
                isgroup: true,
                voice: false,
                copyright: true,
                find: '/api/v1/im/find.html'
            }).on('ready', function (res) {
                console.log("IM Ready")
            }).on('sendMessage', function (data) {
                stompClient.send("/app/reply", {}, JSON.stringify({
                    type: 1,
                    data: data
                }));
            });
        });
    </script>
</div>
</body>
</html>